<template>
  <div class="search-container">
    <van-nav-bar>
      <i slot="left" @click="$router.back()"><van-icon name="arrow-left" /></i>
      <span slot="left" class="text">家政服务标准</span>
    </van-nav-bar>
    <div class="content">
      <van-cell>
        <span class="left"></span>
        <span class="right">服务标准</span>
      </van-cell>
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label="服务区域 :"
      >
        <template #button>
          <van-icon name="arrow-down" @click="showPicker = !showPicker" />
        </template>
      </van-field>
      <van-cell>
        <div slot="title">服务类型 :</div>
        <div slot="title">
          <van-tag
            plain
            type="primary"
            round
            v-for="(item, index) in profession"
            :key="index"
            @click="checkActive(index)"
            :class="isActive == index && isActive !== false ? 'active' : ''"
            >{{ item }}</van-tag
          >
        </div>
      </van-cell>
      <van-cell class="level1">
        <div slot="title">星级标准 :</div>
        <div slot="title">
          <van-tag
            plain
            type="primary"
            round
            v-for="(item, index) in level"
            :key="index"
            @click="checkActive2(index)"
            :class="isActive2 == index && isActive2 !== false ? 'active' : ''"
            >{{ item }}</van-tag
          >
        </div>
      </van-cell>
    </div>
    <van-button type="primary" block>家政服务标准查询</van-button>

    <!-- 选择地区弹出层 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'serviceStandard',
  data () {
    return {
      profession: ['月嫂', '育婴师', '保洁/清', '保姆', '早教/拖', '养老/陪', '家装/搬', '产康师'],
      isActive: false,
      isActive2: false,
      value: '',
      columns: ['长沙', '武汉', '北京', '上海', '深圳'],
      showPicker: false,
      level: ['一星', '二星', '三星', '四星', '五星', '金']
    }
  },
  methods: {
    checkActive (index) {
      // console.log(index)

      this.isActive = index
    },
    checkActive2 (index) {
      this.isActive2 = index
    },
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    }
  }
}
</script>

<style lang="less" scoped>
.search-container {
  min-height: 1332px;
  background-color: #f0eeee;
  /deep/.van-nav-bar__content {
    background-color: #3f51b5;
    height: 200px;
    i.van-icon {
      width: 18px;
      height: 18px;
      margin-left: 10px;
      margin-top: 12px;
      font-size: 40px;
      color: #fff;
    }
    span.text {
      margin-left: 27px;
      font-size: 32px;
      font-weight: 700;
      color: #fff;
    }
    .van-cell {
      color: #323233;
      font-size: 0.37333rem;
      line-height: 0.64rem;
      font-weight: 700;
    }
  }
  div.content {
    position: absolute;
    top: 150px;
    left: 23px;
    width: 704px;
    // height: 1052px;
    z-index: 1;
    background-color: #fff;
    padding: 0px 15px;
    box-sizing: border-box;
    border-radius: 10px;
    .van-cell__value--alone {
      font-weight: 700;
      color: #646566;
      .left {
        display: inline-block;
        width: 8px;
        height: 28px;
        margin-right: 20px;
        background-color: #3f51b5;
      }
      .right {
        font-weight: 700;
        font-size: 14px;
      }
    }
    .van-cell {
      font-weight: 700;
      color: #646566;
      margin-bottom: 15px;
      .van-field {
        border-bottom: 0;
      }
      .van-tag--primary.van-tag--plain {
        font-weight: normal !important;
        color: #979191;
        margin-right: 30px;
        padding: 5px 15px;
        margin-top: 20px;
        margin-bottom: 20px;
      }
    }
    .level1 {
      .van-tag {
        width: 80px;
        margin-right: 20px !important;
        padding: 5px 20px !important;
        // box-sizing: border-box;
      }
    }
    .active {
      color: #3f51b5 !important;
    }
  }
  .van-button {
    position: absolute;
    bottom: 0;
    outline:0 none;
    border: 0;
    background-color: #3f51b5;
  }
}
</style>
